<template>
  <div>
    <el-form size="medium"
             label-position="right"
             label-width="200px">
      <el-form-item label="区域">
        <el-radio v-model="product.area"
                  label=1>全国</el-radio>
        <el-radio v-model="product.area"
                  label=2>&nbsp;</el-radio>
        <el-select v-model="product.cityIds"
                   multiple
                   filterable
                   collapse-tags
                   placeholder="试试搜索"
                   :disabled="product.area === '1'">
          <el-option-group v-for="group in cityList"
                           :key="group.id"
                           :value="group.id"
                           :label="group.cityname">
            <el-option v-for="item in group.children"
                       :key="item.id"
                       :label="item.cityname"
                       :value="item.id">
            </el-option>
          </el-option-group>
        </el-select>
      </el-form-item>
      <el-form-item label="金融产品公司全称">
        <el-select v-model="product.supplierId"
                   filterable
                   placeholder="请选择金融产品公司"
                   @change="setDetail(product.supplierId)">
          <el-option v-for="item in companyList"
                     :key="item.value"
                     :label="item.label"
                     :value="item.value">
          </el-option>
        </el-select>
        <el-button icon="el-icon-plus"
                   type="success"
                   circle
                   size="mini"
                   @click="() => { this.$router.push({ name: 'supplier' }) }"></el-button>
      </el-form-item>
      <el-form-item label="方案名称">
        <el-col :span="7">
          <el-form-item>
            <el-input v-model="product.productName"
                      placeholder="方案名称"
                      size="medium"></el-input>
          </el-form-item>
        </el-col>
      </el-form-item>
      <el-form-item label="最低首付比例">
        <el-col :span="7">
          <el-form-item>
            <el-input v-model="product.downPayRatio"
                      placeholder="%"
                      size="medium"></el-input>
          </el-form-item>
        </el-col>
      </el-form-item>
      <el-form-item label="月供类型">
        <el-radio v-model="product.monthlyType"
                  label=12>等额本息</el-radio>
        <el-radio v-model="product.monthlyType"
                  label=13>等本等息</el-radio>
      </el-form-item>
      <el-form-item label="年利率">
        <el-col :span="7">
          <el-form-item>
            <el-input v-model.number="product.annualRateFloor"
                      placeholder="单位(%)"
                      size="medium"></el-input>
          </el-form-item>
        </el-col>
      </el-form-item>
      <el-form-item label="GPS">
        <el-col :span="7">
          <el-form-item>
            <el-input v-model.number="product.gpsCost"
                      placeholder="单位(元)"
                      size="medium"></el-input>
          </el-form-item>
        </el-col>
      </el-form-item>
      <el-form-item label="上牌费用">
        <el-col :span="7">
          <el-form-item>
            <el-input v-model.number="product.licenseCost"
                      placeholder="单位(元)"
                      size="medium"></el-input>
          </el-form-item>
        </el-col>
      </el-form-item>
      <el-form-item label="其他费用">
        <el-col :span="7">
          <el-form-item>
            <el-input v-model.number="product.othersCost"
                      placeholder="单位(元)"
                      size="medium"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="4">
          <span style="color: #b4b9c6;">（超融、额外返佣、等各种费用）</span>
        </el-col>
      </el-form-item>
      <el-form-item label="总期数">
        <el-radio v-model="product.period"
                  label=24>24期</el-radio>
        <el-radio v-model="product.period"
                  label=36>36期</el-radio>
        <el-radio v-model="product.period"
                  label=48>48期</el-radio>
        <el-radio v-model="product.period"
                  label=60>60期</el-radio>
      </el-form-item>
      <el-form-item label="产品品质">
        <el-checkbox-group v-model="product.qualityList">

          <el-checkbox label='isCommonly'
                       name="一般">一般</el-checkbox>
          <el-checkbox label='isBlack'
                       name="黑户">黑户</el-checkbox>
        </el-checkbox-group>
      </el-form-item>
      <el-form-item label="返佣金额">
        <el-col :span="2">
          <el-radio v-model="product.commissionFlag"
                    label='3'>金额</el-radio>
        </el-col>
        <el-col :span="5">
          <el-input v-model.number="product.commission"
                    placeholder="单位(元)"
                    size="medium"
                    :disabled="product.commissionFlag === '4'"></el-input>
        </el-col>
        <el-col :span="2">
          <el-radio v-model="product.commissionFlag"
                    label='4'>比例</el-radio>
        </el-col>
        <el-col :span="5">
          <el-input v-model.number="product.commissionRatio"
                    placeholder="单位(%)"
                    size="medium"
                    :disabled="product.commissionFlag === '3'"></el-input>
        </el-col>
        <el-col :span="4">
          <span style="color: #b4b9c6;">（贷款金额占比）</span>
        </el-col>
      </el-form-item>
      <el-form-item label="征信要求">
        <el-col :span="15">
          <el-form-item>
            <el-input type="textarea"
                      v-model="product.credit"
                      placeholder="15字以内"></el-input>
          </el-form-item>
        </el-col>
      </el-form-item>
      <el-form-item label="提车时间">
        <el-col :span="6">
          <el-form-item>
            <el-input v-model.number="product.pickCarTime1"
                      placeholder=""
                      size="medium"></el-input>
          </el-form-item>
        </el-col>
        <el-col class="line"
                :span="1"
                style="text-align: center">——</el-col>
        <el-col :span="6">
          <el-form-item>
            <el-input v-model.number="product.pickCarTime2"
                      placeholder=""
                      size="medium"></el-input>
          </el-form-item>
        </el-col>
        <el-col class="line"
                :span="1"
                style="text-align: center">天</el-col>
      </el-form-item>
      <el-form-item label="金融产品经理">
        <el-col :span="7">
          <el-form-item>
            <el-input v-model="product.manager"
                      size="medium"
                      disabled></el-input>
          </el-form-item>
        </el-col>
      </el-form-item>
      <el-form-item label="手机号">
        <el-col :span="7">
          <el-form-item>
            <el-input v-model.number="product.managerPhone"
                      size="medium"
                      disabled></el-input>
          </el-form-item>
        </el-col>
      </el-form-item>
      <el-form-item label="金融产品特性标签">
        <el-col :span="15">
          <el-form-item>
            <el-input type="textarea"
                      v-model="product.productLabel"
                      placeholder="以;分割"></el-input>
          </el-form-item>
        </el-col>
      </el-form-item>
      <el-form-item label="金融产品资料审核材料">
        <el-checkbox-group v-model="product.attrsList">
          <el-checkbox label="idCard"
                       name="身份证">身份证</el-checkbox>
          <el-checkbox label="bankCard"
                       name="银行卡">银行卡</el-checkbox>
          <el-checkbox label="driversLicense"
                       name="驾驶证">驾驶证</el-checkbox>
          <el-checkbox label="businessApply"
                       name="申请表">申请表</el-checkbox>
          <el-checkbox label="incomeCer"
                       name="收入证明/流水">收入证明/流水</el-checkbox>
          <el-checkbox label="residence"
                       name="居住证明">居住证明</el-checkbox>
          <el-checkbox label="pbocCredit"
                       name="人行详版征信报告">人行详版征信报告</el-checkbox>
        </el-checkbox-group>
      </el-form-item>
      <el-form-item>
        <el-button type="primary"
                   @click="publishProduct">发布</el-button>
        <el-button @click="() => {this.$router.go(-1)}">取消</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
import '@/style/common.scss'
import { vListLength, validatenull, validateNumber } from '@/utils/validate'
import { api } from '@/api'
import { HTTPSUCCESS, HTTPDATAFAIL, HTTPPARAMFAIL, HTTPUNKOWNFAIL } from '@/components/constant'

export default {
  data() {
    return {
      cityList: [],
      companyList: [],
      product: {
        area: '1',
        cityIds: [],
        supplierId: null,
        productName: null,
        downPayRatio: null,
        monthlyType: null,
        annualRateFloor: null,
        gpsCost: null,
        licenseCost: null,
        othersCost: null,
        period: null,
        qualityList: [],
        commissionFlag: '3',
        commission: null,
        commissionRatio: null,
        credit: null,
        pickCarTime1: null,
        pickCarTime2: null,
        productLabel: null,
        attrsList: [],
        manager: null,
        managerPhone: null
      }
    }
  },
  activated() {
    this.getProductDetail()
    this.getCityList()
    this.getCompanyList()
  },
  methods: {
    vListLength,
    getProductDetail() {
      if (!validatenull(this.$route.params.productId)) {
        this.$http._get(api.SYS_PRODUCT_DETAIL, this.$route.params.productId).then(
          res => {
            if (res.code === HTTPSUCCESS) {
              const detail = res.data
              detail.area = !validatenull(detail.cityIds) && detail.cityIds.some(id => { return id === '1' }) ? '1' : '2'
              detail.downPayRatio = !validatenull(detail.downpayRatio) ? (detail.downpayRatio * 100).toFixed(2) : null
              detail.monthlyType = !validatenull(detail.monthlyPayType) ? detail.monthlyPayType + '' : null
              detail.annualRateFloor = !validatenull(detail.annualRateFloor) ? (detail.annualRateFloor * 100).toFixed(4) : null
              if (!validatenull(detail.commission)) {
                detail.commissionFlag = '3'
              } else {
                detail.commissionRatio = !validatenull(detail.commissionRatio) ? (detail.commissionRatio * 100).toFixed(4) : null
                detail.commissionFlag = '4'
              }
              detail.pickCarTime1 = !validatenull(detail.pickCarTime) ? detail.pickCarTime.substring(0, detail.pickCarTime.indexOf('-')) : null
              detail.pickCarTime2 = !validatenull(detail.pickCarTime) ? detail.pickCarTime.substring(detail.pickCarTime.indexOf('-') + 1, detail.pickCarTime.indexOf('天')) : null
              detail.manager = !validatenull(detail.productManager) ? detail.productManager : null
              detail.managerPhone = !validatenull(detail.phone) ? detail.phone : null
              detail.productLabel = !validatenull(detail.label) ? detail.label : null
              detail.period = !validatenull(detail.period) ? detail.period + '' : null
              detail.credit = detail.creditRequire || null
              detail.attrsList = detail.attrNames || null
              this.product = detail
            } else {
              this.$msg._message('查询失败 请联系系统管理员', 'error')
            }
          }
        )
      }
    },
    getCityList() {
      this.$http.get(api.SYS_CITY_CITYS).then(
        res => {
          this.cityList = res.data
        }
      )
    },
    getCompanyList() {
      this.$http.get(api.SYS_SUPPLIER_ALL).then(
        res => {
          this.companyList = res.data
        }
      )
    },
    setDetail(supplierId) {
      const supplier = this.companyList.filter(item =>
        item.value === supplierId
      )
      console.log(supplier)
      this.product.manager = supplier[0].productManager
      this.product.managerPhone = supplier[0].phone
    },
    publishProduct() {
      if (validatenull(this.product.area)) return this.$msg._message('请选择区域', 'warning')
      if (this.product.area === '2' && validatenull(this.product.cityIds)) return this.$msg._message('请选择区域', 'warning')
      if (validatenull(this.product.supplierId)) return this.$msg._message('请选择金融公司', 'warning')
      if (validatenull(this.product.productName)) return this.$msg._message('请填写方案名称', 'warning')
      if (validatenull(this.product.downPayRatio)) return this.$msg._message('请填写最低首付比例', 'warning')
      if (!validateNumber(this.product.downPayRatio)) return this.$msg._message('最低首付比例必须为数字', 'warning')
      if (validatenull(this.product.monthlyType)) return this.$msg._message('请选择月供类型', 'warning')
      if (validatenull(this.product.annualRateFloor)) return this.$msg._message('请填写年利率', 'warning')
      if (!validateNumber(this.product.annualRateFloor)) return this.$msg._message('年利率必须为数字', 'warning')
      if (validatenull(this.product.gpsCost)) return this.$msg._message('请填写GPS', 'warning')
      if (!validateNumber(this.product.gpsCost)) return this.$msg._message('GPS必须为数字', 'warning')
      if (validatenull(this.product.licenseCost)) return this.$msg._message('请填写上牌费用', 'warning')
      if (!validateNumber(this.product.licenseCost)) return this.$msg._message('上牌费用必须为数字', 'warning')
      if (validatenull(this.product.othersCost)) return this.$msg._message('请填写其他费用', 'warning')
      if (!validateNumber(this.product.othersCost)) return this.$msg._message('其他费用必须为数字', 'warning')
      if (validatenull(this.product.period)) return this.$msg._message('请选择总期数', 'warning')
      if (validatenull(this.product.pickCarTime1)) return this.$msg._message('请填写提车时间', 'warning')
      if (validatenull(this.product.pickCarTime2)) return this.$msg._message('请填写提车时间', 'warning')
      if (!validateNumber(this.product.pickCarTime1) || !validateNumber(this.product.pickCarTime2)) return this.$msg._message('提车时间必须为数字', 'warning')
      if (validatenull(this.product.attrsList)) return this.$msg._message('请选择需要审核的资料', 'warning')
      if (validatenull(this.product.qualityList)) return this.$msg._message('请选择产品品质', 'warning')
      if (validatenull(this.product.commission) && this.product.commissionFlag === '3') return this.$msg._message('请填写返佣金额', 'warning')
      if (validatenull(this.product.commissionRatio) && this.product.commissionFlag === '4') return this.$msg._message('请填写返佣比例', 'warning')
      if (!validateNumber(this.product.commission) && this.product.commissionFlag === '3') return this.$msg._message('返佣金额必须为数字', 'warning')
      if (!validateNumber(this.product.commissionRatio) && this.product.commissionFlag === '4') return this.$msg._message('返佣比例必须为数字', 'warning')
      let label
      if (this.product.area === '1') this.product.cityIds = [1]
      if (!validatenull(this.product.productLabel)) {
        label = this.product.productLabel.indexOf('；') > 0 ? this.product.productLabel.replace(/；/g, ';') : this.product.productLabel
      }
      const params = {
        productId: this.$route.params.productId || null,
        productType: 1,
        productCarType: 9,
        status: 0,
        cityIds: this.product.cityIds,
        supplierId: this.product.supplierId,
        productName: this.product.productName,
        downpayRatio: (this.product.downPayRatio / 100).toFixed(4),
        monthlyPayType: this.product.monthlyType,
        annualRateFloor: (this.product.annualRateFloor / 100).toFixed(4),
        gpsCost: this.product.gpsCost,
        licenseCost: this.product.licenseCost,
        othersCost: this.product.othersCost,
        commission: this.product.commissionFlag === '3' ? this.product.commission : null,
        commissionRatio: this.product.commissionFlag === '4' ? (this.product.commissionRatio / 100).toFixed(4) : null,
        period: this.product.period,
        isCommonly: this.product.qualityList.some(quality => { return quality === 'isCommonly' }) ? 1 : 0,
        isBlack: this.product.qualityList.some(quality => { return quality === 'isBlack' }) ? 1 : 0,
        creditRequire: this.product.credit,
        pickCarTime: this.product.pickCarTime1 + '-' + this.product.pickCarTime2 + '天',
        label: label,
        attrs: this.product.attrsList
      }
      this.$http.post(api.SYS_PRODUCT_NEW, params).then(
        res => {
          if (res.code === HTTPSUCCESS) {
            this.$msg._message('产品上架成功！', 'success')
            this.$router.push({ name: 'singleProduct' })
          } else {
            this.$msg._message('产品上架失败 请联系系统管理员', 'error')
          }
        }
      )
    }
  }
}
</script>
